<!--
 * @Autor: dingxiaolin
 * @Date: 2021-01-06 16:59:54
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-03-02 15:17:06
-->
<template>
    <div class="common-container">
        <div class="common-title">
            <span>{{ title }}</span>
            <el-button
                v-if="isDelete"
                class="delete"
                type="primary"
                size="mini"
                icon="iconfont iconshanchu"
                v-noPermissionDom="'bmsc3'"
                @click="$emit('onDelete')"
                plain
            >
                删除</el-button
            >
        </div>
        <div class="common-body" :style="{ height: height ? '' : '0' }">
            <slot v-if="height"></slot>
            <el-scrollbar v-else>
                <slot></slot>
            </el-scrollbar>
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component({})
export default class CommonPanel extends Vue {
    @Prop()
    public title: string;
    @Prop()
    public height: boolean;
    @Prop()
    public isDelete: boolean;
}
</script>

<style lang="scss" scoped>
.common-container {
    height: 100%;
    background: #ffffff;
    box-shadow: 0 1px 4px 0 rgba(3, 44, 77, 0.1);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.common-title {
    font-family: 'PingFangSC-Regular';
    color: #000;
    border-radius: 2px 2px 0 0;
    margin: 0 15px;
    font-weight: 600;
    height: 56px;
    line-height: 56px;
    font-size: 16px;
    border-bottom: 1px solid #e3e7ef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.common-body {
    padding: 15px;
    //   overflow-y: hidden;
    flex: auto;
}
/deep/ .el-scrollbar {
    height: 100%;
    .el-scrollbar__wrap {
        overflow-x: hidden;
    }
}
</style>
